<template>
  <div>
    <el-form :inline="true">
        <el-form-item>
            <el-button type="primary" @click="formDiaLog = true">新增字典值</el-button>
        </el-form-item>
        <el-select v-model="typeCode">
               <el-option label="请选择..." value="null"></el-option>
               <el-option v-for="item in dictType" :key="item.code" :label="item.code" :value="item.code">
              </el-option>
        </el-select>
        <el-button class="search" type="success" @click="getDict">查询</el-button>
  </el-form>
    <el-table
      :data="dictValue"
      style="width: 100%">
      <el-table-column
        prop="value"
        label="数据字典值"
        width="200">
      </el-table-column>
      <el-table-column
        prop="orderNo"
        label="序列号"
        width="200">
      </el-table-column>
      <el-table-column
        prop="typeCode"
        label="类型编码"
        width="200">
      </el-table-column>
      <el-table-column
       prop="text"
       label="数据字典值描述"
       width = "200">
      </el-table-column>
      <el-table-column
					prop="icon"
					label="操作">

				<template slot-scope="scope">
					<el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
					<el-divider direction="vertical"></el-divider>

					<template>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm>
					</template>
				</template>
			</el-table-column>
    </el-table>

    <!-- 增加以及编辑对话框 -->
    <el-dialog
				title="提示"
				:visible.sync="formDiaLog"
				width="600px" 
				:before-close="handleClose">

			<el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">

				<el-form-item label="数据字典类型编码" prop="typeCode" label-width="150px">
          <el-select v-model="editForm.typeCode">
               <el-option label="请选择..." value=""></el-option>
               <el-option v-for="item in dictType" :key="item.code" :label="item.code" :value="item.code">
              </el-option>
            </el-select>
				</el-form-item>

				<el-form-item label="数据字典值" prop="value" label-width="150px">
					<el-input v-model="editForm.value" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="数据字典值描述" prop="text" label-width="150px">
					<el-input v-model="editForm.text" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="序列号" prop="orderNo" label-width="150px">
          <el-input v-model="editForm.orderNo" autocomplete="off"></el-input>
        </el-form-item>

				<el-form-item class="add">
					<el-button v-if="editForm.id==undefined" type="primary" @click="submitForm('editForm')">创建</el-button>
          <el-button v-else type="primary" @click="submitForm('editForm')">更新</el-button>
				</el-form-item>
			</el-form>

		</el-dialog>

  </div>
</template>

<script>
export default {
  name: 'DictValue',
  data() {
    return {
      formDiaLog: false,
      dictValue: [],
      editForm:{},
      dictType:[],
      typeCode: null,
      editFormRules: {
        typeCode: [
           { required:true, message:'请选择数据类型' , trigger:['blur','change']}
          ],
        value: [
						{required: true, message: '请输入数据值', trigger: 'blur'}
					],
					orderNo: [
						{required: true, message: '请输入数据值序列号', trigger: 'blur'}
					],
          text: [
            {required: true, message: '请输入数据字典描述',trigger:'blur'}
          ]
				},
    }
  },
  methods:{
    getDict(){
      this.$axios.get("/sys/dict/value/list/"+this.typeCode).then(res =>{
          this.dictValue = res.data.data;
      })
    },
    getType(){
      this.$axios.get("/sys/dict/list").then(res =>{
         this.dictType = res.data.data;
      })
    },
    delHandle(id){
      var ids = []

      if (id) {
        ids.push(id)
      } else {
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
        
      }

      this.$axios.post("/sys/dict/value/delete", ids).then(res => {
        this.$message({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success',
          onClose:() => {
            this.getDict()
          }
        });
        this.getDict();
        })
    },
    handleClose(){
      this.resetForm('editForm');
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
				this.formDiaLog = false
				this.editForm = {}
			},
      submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('/sys/dict/value/' + (this.editForm.id?'update' : 'save'), this.editForm)
							.then(res => {

								this.$message({
									showClose: true,
									message: '恭喜你，操作成功',
									type: 'success',
									onClose:() => {
										this.getDict();
                    this.resetForm('editForm');
									}
								});

								this.formDiaLog = false;
						})
					} else {
						console.log('error submit!!');
						return false;
					}
          this.getDict();
          
				});
			},
      editHandle(id){
          this.$axios.get('/sys/dict/value/info/'+ id).then(res =>{
             this.editForm = res.data.data
             this.formDiaLog = true
          })
      }

  },
  created(){
    this.getDict();
    this.getType();
  }

}
</script>

<style scoped>
  .cell{
	text-align: center;
  }
 .add{
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .search{
    margin-left: 20px !important;
  }
  .el-table {
    font-size: 18px;
  }
</style>